<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
    <style>
      .title {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      // className它不会动态和静态属性一起混用，只能用一个
      const titleClass = 'title'

      const vnode = (
        <div>
          <div className={titleClass}>hello</div>
          <div className={false ? titleClass : ''}>hello</div>
          {/* 静态和动态样式名混用 ，一般采用字符串拼接 */}
          <div className={titleClass + ' abc'}>hello</div>
          <hr />
          {/*style在jsx语法中只支持 对象写法 */}
          <div style={{ color: 'blue', fontSize: '20px' }}>我是style样式</div>
        </div>
      )

      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
